<template>
  <div class="setting-posters-container">
    <!-- 说明标签 -->
    <div class="customers-leave-label">
      <div>
        温馨提示：系统有默认海报背景，不上传将启用系统背景图
      </div>
    </div>

    <el-form label-width="200px">
      <el-form-item label="首页分享海报背景图">
        <el-upload :action="posterUrl" :show-file-list="false" :on-success="success"
          :headers="{'Access-Token':token}"
          :data="{ type: type, key: key }"
          style="display:inline-block">
          <el-button type="primary" plain size="small" @click="type = 0">选择海报</el-button>
        </el-upload>
        <div class="setting-posters-text" style="width:calc(100% - 150px)">上传尺寸必须为：宽375px 高670px</div>
      </el-form-item>
      <el-form-item v-if="mainUrl!==''">
        <l-pic :picurl="mainUrl" :size="{width:45,height:80}" :disdel="false" :disview="false"/>
      </el-form-item>
      <el-form-item label="详情分享海报背景图">
        <el-upload :action="posterUrl" :show-file-list="false" :on-success="success"
          :headers="{'Access-Token':token}"
          :data="{ type: type, key: key }"
          style="display:inline-block">
          <el-button type="primary" plain size="small" @click="type = 1">选择海报</el-button>
        </el-upload>
        <div class="setting-posters-text" style="width:calc(100% - 150px)">上传尺寸必须为：宽375px 高563px</div>
      </el-form-item>
      <el-form-item v-if="picUrl!==''">
        <l-pic :picurl="picUrl" :size="{width:53,height:80}" :disdel="false" :disview="false"/>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getPosters, posterUrl } from '@/api/setting'
import { getToken } from '@/utils/auth'
import LPic from '@/components/lPic'

export default {
  name: 'setting-posters',
  components: {
    LPic
  },
  data() {
    return {
      posterUrl: posterUrl(),
      token: getToken(),
      key: this.$store.state.app.activeApp.saa_key,
      type: 0,
      mainUrl: '',
      picUrl: ''
    }
  },
  mounted(){
    this.getPosters();
  },
  methods: {
    /**
     * 获取商品父分组
     */
    getPosters() {
      getPosters({ key: this.$store.state.app.activeApp.saa_key }).then(response => {
        if(response.status === 200){
          this.mainUrl = response.data[1].pic_url;
          this.picUrl = response.data[0].pic_url;
        }else{
          this.$message.error(response.message);
        }
      })
    },
    success(res) {
      if(res.status === 200) {
        if(this.type === 0) {
          this.mainUrl = res.data;
        }else{
          this.picUrl = res.data;
        }
      }else{
        this.$message.error(res.message);
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.setting-posters-container{
  min-height: calc(100vh - 100px);
  margin: 20px;
  background-color: #fff;
  padding:25px;
  box-shadow: 0px 0px 4px 0px rgba(115, 115, 115, 0.2);
}
.customers-leave-label{
  width: 99%;
  padding: 10px 0px 10px 50px;
  margin: 10px 0px 20px 0px;
  border-radius: 5px;
  background-color: #ecf5ff;
  border: 1px solid #b3d8ff;
  color: #409eff;
  letter-spacing: 1px;
  &>div{
    padding: 1px 0;
  }
}
.setting-posters-text{
  width: calc(50% - 100px);
  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding: 0 0 0 20px;
  color: #c0c4cc;
  font-size: 14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  vertical-align: middle;
}
</style>